:root
  --color-site-body: $color-site-bg
  --color-site-bg: $color-site-bg
  --color-site-inner: $color-site-inner
  --color-site-footer: $color-site-footer
  --color-card: $color-card
  --color-text: $color-text
  --color-block: $color-block
  --color-inlinecode: $color-inlinecode
  --color-codeblock: $color-codeblock
  --color-h1: $color-h1
  --color-h2: $color-h2
  --color-h3: $color-h3
  --color-h4: $color-h4
  --color-h5: $color-h5
  --color-h6: $color-h6
  --color-p: $color-p
  --color-list: $color-list
  --color-list-hl: $color-list-hl
  --color-meta: $color-meta

*
  box-sizing: border-box
  outline: none
  margin: 0
  padding: 0

html
  color: var(--color-text)
  width: 100%
  height: 100%
  font-family: $fontfamily
  font-size: $fontsize-root
  >
    if hexo-config('custom_css.scrollbar.size')
      scrollbar(convert(hexo-config('custom_css.scrollbar.size')), convert(hexo-config('custom_css.scrollbar.border')) || 0px)

body
  background-color: var(--color-site-body)
  text-rendering: optimizelegibility
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
  line-height: $lineheight
  -webkit-text-size-adjust: 100%
  -ms-text-size-adjust: 100%
  &.modal-active
    overflow: hidden
    @media screen and (max-width: $modal-threshold)
      position: fixed
      top: 0
      right: 0
      bottom: 0
      left: 0



::-moz-selection {
  background: $color-selection
}

::selection {
  background: $color-selection
}


h1
  font-size: $fontsize-h1
h2
  font-size: $fontsize-h2
h3
  font-size: $fontsize-h3
h4
  font-size: $fontsize-h4
h5
  font-size: $fontsize-h5
h6
  font-size: $fontsize-h6

h1,h2,h3,h4,h6
  font-weight: normal

a
  color: $color-link
  cursor: pointer
  text-decoration: none
  trans()
  &:hover
    color: $color-hover
  &:active,&:hover
    outline: 0
  &:not([href])
    cursor: default


pre
  tab-size: 4
  -moz-tab-size: 4
  -o-tab-size: 4
  -webkit-tab-size: 4

.clearfix
  zoom: 1
  &:before,&:after
    content: " "
    display: table
  &:after
    clear: both

.hidden
  text-indent: -9999px
  visibility: hidden
  display: none

.inner
  position: relative
  width: 80%
  max-width: 710px
  margin: 0 auto
.vertical
  display: table-cell
  vertical-align: middle


ul,ol
  padding-left: 0
  li
    list-style: none

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary
  display: block

article
  overflow: hidden

abbr[title]
  border-bottom: 1px dotted
b,strong
  font-weight: bold
dfn
  font-style: italic
h1
  font-size: 2em
  margin: 0.67em 0
mark
  background: #ff0
  color: #000
small
  font-size: 80%
sub,sup
  font-size: 50%
  line-height: 1em
sup
  vertical-align: text-top
sub
  vertical-align: text-bottom
img
  border: 0
  background: none
  max-width: 100%

svg:not(:root)
  overflow: hidden

figure
  margin: 1em 40px

hr
  -moz-box-sizing: content-box
  box-sizing: content-box
  height: 0
  border: 0
  border-radius: 1px
  border-bottom: 1px solid alpha($color-text, .1)


pre
  overflow: auto

span.dot,span.sep
  font-size: 0.9em
  margin: 0 .2rem
span.dot:before
  content: '·'
span.sep:before
  content: '/'

code,kbd,pre,samp
  font-family: monospace, monospace
  font-size: 1em


button,input,optgroup,select,textarea
  color: inherit /* 1 */
  font: inherit /* 2 */
  margin: 0 /* 3 */

button
  overflow: visible

button,select
  text-transform: none


button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"]
  -webkit-appearance: button /* 2 */
  cursor: pointer /* 3 */


button[disabled],html input[disabled]
  cursor: default

button::-moz-focus-inner,
input::-moz-focus-inner
  border: 0
  padding: 0


input[type="checkbox"],
input[type="radio"]
  box-sizing: border-box /* 1 */
  padding: 0 /* 2 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button
  height: auto


input[type="search"]
  -webkit-appearance: textfield /* 1 */
  -moz-box-sizing: content-box
  -webkit-box-sizing: content-box /* 2 */
  box-sizing: content-box

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration
  -webkit-appearance: none


fieldset
  border: 1px solid #c0c0c0
  margin: 0 2px
  padding: 0.35em 0.625em 0.75em


legend
  border: 0 /* 1 */
  padding: 0 /* 2 */

textarea
  overflow: auto

optgroup
  font-weight: bold


table:not([class])
  border-collapse: collapse
  overflow: auto
  display: inline-block
  max-width: 100%
  vertical-align: text-top
  th
    background-color: darken($color-block, 2)
  td,th
    padding: 8px 16px
    border: 2px solid darken($color-block, 2)
    line-height: 1.5
    font-size: 90%
  tr
    word-break: keep-all
    background-color: lighten($color-block, 3)
    trans()
    &:hover
      background-color: darken($color-block, 2)


td,th
  padding: 0
